<template>
    <div>
      <!-- 入驻流程 -->
        <div class="apply-form w1160">
            <h2 class="text-center fz30">入驻流程</h2>
            <ul class="flex">
                <li class="flex fd_c" v-for="item in ImgList" :key="item.id">
                    <img :src="$get(item.url)">
                    <p class="title fz20">{{ item.des }}</p>
                </li>
                <img class="arrowhead img1" :src="$get('right-arrow')">
                <img class="arrowhead img2" :src="$get('right-arrow')">
                <img class="arrowhead img3" :src="$get('right-arrow')">
            </ul>
        </div>
        <!-- 入驻申请 -->
        <div class="form-box">
            <div class="bg">
                <div class="form w1160">
                    <p class="fz30">入驻申请</p>
                    <el-form
                        :model="ruleForm"
                        :rules="rules"
                        status-icon
                        ref="ruleForm"
                        label-position="top"
                        label-width="0"
                        class="apply-ruleForm"
                    >
                        <el-form-item prop="name">
                            <el-input v-model="ruleForm.name" placeholder="请输入姓名"></el-input>
                        </el-form-item>
                        <el-form-item prop="phone">
                            <el-input v-model="ruleForm.phone" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                        <el-form-item prop="resource">
                            <el-input v-model="ruleForm.resource" placeholder="请输入您要供应的资源"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm">提交</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'ApplyForm',
  data () {
    const validatePhone = (rules, value, callback) => {
      const reg = /^1[3-9]\d{9}$/
      if (!reg.test(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    return {
      ImgList: [
        { id: 1, url: 'fill-in-information', des: '填写信息' },
        { id: 2, url: 'business-relations', des: '商务联系' },
        { id: 3, url: 'negotiate-resources', des: '洽谈资源' },
        { id: 4, url: 'sign-up-for-cooperation', des: '签约合作' }
      ],
      loading: false,
      ruleForm: {
        name: '',
        phone: '',
        resource: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur', validator: validatePhone }
        ],
        resource: [
          { required: true, message: '请输入您要供应的资源', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm () {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.loading = true
          //   console.log(this.ruleForm)
          try {
            const res = await this.$req('/application', 'post', this.ruleForm)
            console.log(res)
            if (res.code === 20000) {
              this.$message.success('提交成功，请等待审核')
              this.$refs.ruleForm.resetFields()
            }
          } catch (err) {
            this.loading = false
            // console.log(err)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.apply-form {
    padding: 70px 0 100px;
    ul {
        position: relative;
        justify-content: space-around;
        .arrowhead {
            position: absolute;
        }
        .img1 {
            left: 48%;
            top: 54px;
        }
        .img2 {
            left: 261px;
            top: 28%;
        }
        .img3 {
            right: 257px;
            top: 28%;
        }
        li {
            justify-content: center;
            align-items: center;
        }
    }
    .title {
        padding-top: 30px;
    }
}

.form-box {
    width: 100%;
    .bg {
        position: relative;
        height: 515px;
        background: url(@/assets/img/residency-application.png) no-repeat center / cover;
        .form {
            padding-top: 65px;
            .input-box input {
                height: 60px;
                line-height: 60px;
            }
            p {
                margin-bottom: 45px;
            }
        }
        &::before {
            content: "";
            position: absolute;
            height: 42px;
            width: 3px;
            left: 163px;
            top: 68px;
            background-color: orange;
        }
    }
    .apply-ruleForm {
        width: 500px;
        :deep(.el-input__inner) {
            height: 60px;
        }
        :deep(.el-button--primary) {
            border-radius: 76px;
            width: 154px;
        }
    }
}
</style>
